<template>
  <header class="header-wrap">
    <div class="header-left">
      <i class="switch" :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'" @click="switchSidebar"></i>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="(item,k) in routeList"
          :key="k"
          :to="{ path: item.path }"
        >
          {{item.name}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <ul class="header-right">
      <li><i class="el-icon-s-custom"></i>{{userInfo.name}}</li>
      <li><a href="http://www.xxudong.com" target="_blank"><i class="el-icon-s-home"></i>我的博客</a></li>
      <li @click="clickLogout"><i class="el-icon-s-promotion"></i>退出</li>
    </ul>
  </header>
</template>

<script>
  import {mapState, mapMutations} from "vuex";
  import {logout} from "../assets/api/getData";
  import {clearStore} from "../assets/utils/tools";

  export default {
    name: "headerVue",
    data() {
      return {}
    },
    computed: {
      ...mapState(['userInfo', 'isCollapse', 'routeList']),
    },
    watch: {
      $route(newValue) {
        let arr = newValue.matched;
        arr.shift();
        let list = [];
        arr.forEach(item => {
          list.push({
            name: item.meta.name,
            path: item.path
          })
        });
        console.log(newValue);
        console.log(list);
        this['SET_ROUTE_LIST'](list);
      }
    },
    methods: {
      ...mapMutations(['SET_IS_COLLAPSE', 'SET_ROUTE_LIST']),
      switchSidebar() {
        this['SET_IS_COLLAPSE'](!this.isCollapse);
      },
      async clickLogout() {
        let res = await logout();
        this.$message.success(res.message);
        this.$router.push({path: "/login"});
        clearStore();
      }
    }
  }
</script>

<style lang="less" scoped>
  .header-wrap {
    height: @height-header;
    background-color: #FFFFFF;
    border-bottom: 1px solid @color-border;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;

    .header-left {
      display: flex;
      align-items: center;

      .switch {
        font-size: 28px;
        margin-right: 15px;
        cursor: pointer;
      }
    }

    .header-right {
      display: flex;
      align-items: center;

      li {
        margin-right: 20px;
        font-size: 16px;
        cursor: pointer;

        &:last-child {
          margin-right: 0;
        }

        i {
          margin-right: 5px;
        }
      }
    }
  }
</style>
